<template>
  <div class="px-2 lg:px-4">
    <div
      v-for="menu in menus"
      :key="menu.title"
      class="mb-4 lg:mb-8 w-full h-36 relative rounded-lg overflow-hidden"
      @click="$emit('close')"
    >
      <nuxt-link :to="localePath(menu.path, $i18n.locale)">
        <img
          :src="getImgSrc(menu.bg)"
          :alt="menu.title"
          class="object-cover w-full h-full"
        />
        <div
          class="menu-title absolute top-0 pl-8 pt-4 text-2xl text-purple-500 bg-gray-100 uppercase"
        >
          {{ menu.title }}
        </div>

        <div
          v-if="menu.description && $control.ui.menu.showDescription"
          class="absolute w-full bottom-0 pl-8 p-2 text-sm text-gray-200 bg-gray-900 bg-opacity-50"
        >
          {{ menu.description }}
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NcCompMenuCard',
  props: {
    menus: Array,
  },
  methods: {
    getImgSrc(imgUrl) {
      return imgUrl + '?x-oss-process=style/banner-compress'
    },
  },
}
</script>

<style scoped>
.menu-title {
  width: 200px;
  height: 32px;
  padding: 2px;
  left: -40px;
  top: 20px;
  transform: rotate(-30deg);
  text-align: center;
  vertical-align: middle;
  line-height: 28px;
}
</style>
